<template>
<!-- 降水----3d扇形图 -->
    <div class="fanChart">
        <h3 class="title">近24h降水统计</h3>
        <div class="diskes">
            <div class="disk disk1"></div>
            <div class="disk disk2"></div>
            <div class="arc"></div>
            <div class="line line1"></div>
            <div class="line line2"></div>
            <div class="line line3"></div>
        </div>
        <div class="charts" id="fanCharts"></div>
        <ul class="triangles">
            <li v-for="(item,index) of colorCode" :key="index">
                <span :style="'border-bottom:1rem solid'+item.color"></span>
                <span :style="'color:'+item.color">{{item.name}}</span>
            </li>
        </ul>
    </div>
</template>

<script>
import Highcharts from 'highcharts/highstock';
export default {
    data(){
        return{
            // chart:null,
            colorCode:[
                {name:'小雨',color:'#00C7FF'},
                {name:'中雨',color:'#12FF00'},
                {name:'大雨',color:'#F9FE02'},
                {name:'暴雨',color:'#F87B02'},
                {name:'特大暴雨',color:'#FD0100'},
            ],
            options:{
                credits: {
                    enabled:false
                },//去掉地址
                colors: ['#00C7FF','#12FF00','#F9FE02','#F87B02','#FD0100'],
                chart: {
                    type: 'pie',
                    backgroundColor:'transparent',
		            options3d: {
		            	enabled: true,
		            	alpha: 60,
                        beta: 0,
                        pinchType:true,
		            }
	            },
	            title: {
	            	text: ''
	            },
	            tooltip: {
	            	pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
	            },
	            plotOptions: {
	            	pie: {
	            		allowPointSelect: true,
	            		cursor: 'pointer',
	            		depth: 25,
	            		// dataLabels: {
                        //     enabled: true,
                        //     format: '{point.y}',
                        //     // distance: 1,//文字与饼图距离
                        //     // connectorColor: 'transparent',//连线颜色
                        //     connectorWidth:0,
                        //     style:{
                        //         color:'#fff',
                               
                        //     }
	            		// }
	            	}
	            },
	            series: [{
	            	type: 'pie',
                    name: '雨量统计占比',
                    // size:'80%',//饼图大小设置
                    dataLabels:{//标签
                        distance:1,//标签和饼图距离
                        // format:"{y}",
                        style:{"color":"#fff"},
                        formatter:function(){
                            // console.log(this)
                            return `<span style="color:${this.color}">${this.point.y}%</span>`
                        }
                    },
	            	data: [
	            		['小雨',40],
                        ['中雨',30],
                        ['大雨',20],
	            		['暴雨', 5],
                        {
                            name: '特大暴雨',
                            y: 5,
                            sliced: true,  // 突出显示某个扇区，表示强调
                        },
	            	]
	            }]
            }
        }
    },
    methods:{
        initCharts(){
            // let fsize = document.body.clientWidth/1920*16
            let fanCharts = document.getElementById('fanCharts')
            // fanCharts.style.height =document.body.clientWidth<1900? fsize*12.6+'px':'12.6rem' 
            let chart = new Highcharts.Chart(fanCharts, this.options);
        }
    },
    mounted(){
        this.initCharts()
    }
}
</script>

<style lang="scss" scoped>
    .fanChart{
        width:100%;
        height:100%;
        background-image: url('../../../../../static/images/actuallyMonitor/textInfo.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        position: relative;
        .title{
            font-size:1.3rem;
            letter-spacing: .2rem;
            margin: 1rem 0 0 1rem;
        }
        .triangles{
            position:absolute;
            right:1rem;
            height:80%;
            display:flex;
            flex-direction: column;
            li{
                flex:1;
                width:6rem;
                text-align: right;
                span{
                    &:nth-child(1){
                        width: 0;
                        height: 0;
                        border-left: .5rem solid transparent;
                        border-right: .5rem solid transparent;
                        border-bottom: 1rem solid red;
                        display:inline-block;
                        vertical-align: center;
                    }
                }
            }
        }
        .diskes{
            position:absolute;
            left:40%;
            top:65%;
            transform-style:preserve-3d;
            transform:rotate3d(1,0,0,60deg);
            .disk{
                border:.15rem #62E1FD solid;
                border-radius: 50%;
                position:absolute;
                transform: translate(-50%,-50%);
                box-shadow: 0rem 0rem 2rem .15rem rgba(228, 223, 223,.4);
            }
            .disk1{
                width:12rem;
                height:12rem;
            }
            .disk2{
                width:9rem;
                height:9rem;
            }
            .arc{
                position:absolute;
                transform: translate(-50%,-50%) rotateZ(90deg);
                width:12rem;
                height:12rem;
                border: solid .15rem #04FC39;
                border-color: transparent transparent #04FC39 transparent;
                border-radius: 0 0 50% 50%;
                animation: arc 3s linear normal infinite;
            }
            .line{
                position:absolute;
                width:.1rem;
                height:8rem;
                background: linear-gradient(to top, #62E1FD, #041033);
                box-shadow: 0rem 0rem 2rem .1rem rgba(202, 199, 199, 0.3);
                animation: lines 1.5s linear normal infinite;
                // transform-origin:center top;
                // transform:rotate(180deg);
            }
            .line1{
                left:6rem;
                top:-8rem;
            }
            .line2{
                left:-4rem;
                top:-15rem;
            }
            .line3{
                left:-7rem;
                top:-10rem;
            }
        }
        .charts{
            width:70%;
            height:90%;
            position:absolute;
            left:39%;
            top:50%;
            transform: translate(-50%,-50%);
            // background-color: #fff;
        }
    }
@keyframes arc {//圆弧
  0% {
    transform: translate(-50%,-50%) rotateZ(90deg);
  }
  100% {
    transform: translate(-50%,-50%) rotateZ(450deg);
  }
}
@keyframes lines {//圆弧
  0% {
    opacity: 0;
  }
  50%{
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
</style>